<template>
  <div class="pages clientsalePrice">
    <div class="pageLevel">
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="90px" class="demo-ruleForm">
          <el-form-item label label-width="15">
            <el-input
              placeholder="请输入协议编号或协议名称"
              v-model="clientsalePrice.agreementName"
              size="small"
              style="width:200px;"
            ></el-input>
          </el-form-item>
          <el-form-item label="协议类型:" filterable>
            <el-select v-model="clientsalePrice.agreementType" placeholder="全部" size="small">
              <el-option label="全部" value></el-option>
              <el-option
                v-for="(item, index) in agreementTypeList"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="协议状态:" filterable>
            <el-select v-model="clientsalePrice.agreementStatus" placeholder="全部" size="small">
              <el-option label="全部" value></el-option>
              <el-option
                v-for="(item, index) in agreementStatusList"
                :key="index"
                :label="item"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label label-width="20px">
            <el-button type="primary" size="mini" @click="counsearch" class="Button">搜索</el-button>
          </el-form-item>
          <el-form-item label label-width="20px">
            <el-button type="primary" size="mini" @click="routerPush('1')">添加销售价格协议</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="agreementCode" label="协议编号" align="center"></el-table-column>
          <el-table-column prop="agreementName" label="协议名称" align="center"></el-table-column>
          <el-table-column prop="agreementType" label="协议类型" align="center">
            <template slot-scope="scope">
              <span>{{agreementTypeList[scope.row.agreementType]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="协议状态" align="center">
            <template slot-scope="scope">
              <span>{{agreementStatusList[scope.row.status]}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="startDate" :formatter="tim" label="协议开始时间" align="center"></el-table-column>
          <el-table-column prop="endDate" :formatter="tim1" label="协议结束时间" align="center"></el-table-column>
          <el-table-column prop="name" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="routerPush('2',scope.row.id,scope.row.status)"
                type="text"
                class="addDetail"
              >查看</el-button>
              <el-button
                size="small"
                v-if="scope.row.status=='1'||scope.row.status=='2'||scope.row.status=='3'"
                @click="deletes(scope.$index,scope.row)"
                type="text"
                class="delete"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import u from "@/util/state";
import { deleteOrderPriceAgreement, ListOrderPriceAgreement } from "@/api";
export default {
  computed: mapState(["sub", "merchantId", "power"]),
  data() {
    return {
      agreementStatusList: u.agreementStatusList,
      agreementTypeList: u.agreementTypeList,
      options: [{}],
      clientsalePrice: {
        agreementName: "",
        agreementType: "",
        agreementStatus: ""
      },
      tableData: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      // 日期控件
      name: "", //客户名称
      customerId: ""
    };
  },
  mounted() {
    this.name = util.getQuery().name;
    this.customerId = util.getQuery().id;
    this.priceList(this.pageSize, this.currentPage);
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.priceList(this.pageSize, this.currentPage);
        }
      },
      deep: true
    }
  },
  methods: {
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    // 价格协议列表
    priceList(pageSize, pageNum) {
      let data = {
        customerId: this.customerId,
        pageNum: pageNum,
        pageSize: pageSize,
        supplierId: this.merchantId,
        agreementType: this.clientsalePrice.agreementType,
        status: this.clientsalePrice.agreementStatus,
        keyword: this.clientsalePrice.agreementName
      };
      ListOrderPriceAgreement(data).then(res => {
        this.tableData = res.data.list;
        this.totalItems = res.data.pageTotal;
      });
    },
    // 查询按钮
    counsearch() {
      this.priceList(this.pageSize, this.currentPage);
    },
    routerPush(type, id = "", agreementStatus = "", name, customerId) {
      util.routerTo(
        "/operate-management/client-management/client-companyMg/client-addSalePrice",
        {
          type: type,
          id: id,
          agreementStatus: agreementStatus,
          name: this.name,
          customerId: this.customerId
        }
      );
    },
    //转时间戳
    tim(row, column) {
      return util.foryear(row.startDate);
    },
    tim1(row, column) {
      return util.foryear(row.endDate);
    },
    // 删除
    deletes(index, rows) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      })
        .then(() => {
          let data = {
            agreementId: rows.id
          };
          deleteOrderPriceAgreement(data).then(res => {
            if (res.code == "200") {
              this.priceList(20, 1);
              this.$message({
                type: "success",
                message: res.msg
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //跳页
    toPage() {
      this.priceList(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.priceList(this.pageSize, 1);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.priceList(this.pageSize, this.currentPage);
    }
  }
};
</script>
<style>
.billdata .el-date-editor .el-range__close-icon {
  display: none;
}
</style>
